
// export default function About() {
//   return (
//     <div>
//       <h1 >Page About</h1>
//     </div>
//   );
// }
import styles from './about.less'
import {emojis} from './emojis'
import React, { FC, useEffect, useState,useLayoutEffect } from 'react';
import { IndexModelState, ConnectProps, Loading, connect, useSelector, useDispatch } from 'umi';
import Info from '@/components/about/index'
import Load from '@/components/about/Load'

interface PageProps extends ConnectProps {
  about: IndexModelState;
  loading: boolean;
  dispatch: (payload: any) => void
}

const About: FC<PageProps> = ({ about, dispatch }) => {
  const { name ,hostList,size,recommed} = about;
  let [flag, setFlag] = useState(false)
  let [value, setValue] = useState('')
  let [page, setPage] = useState(1)
  let [pageSize, setPageSize] = useState(6)
  let [cur, setCur] = useState(0)

  useLayoutEffect(() => {
    dispatch({
      type: 'about/query'
    })
    dispatch({
      type: 'about/host',
      payload: {page:cur+1,pageSize}
    })
    dispatch({
      type: 'about/recommed'
    })
    
  }, [cur])

  let toTop = () => {
    let timer: number | null = null;
      cancelAnimationFrame((timer as unknown as number));
      timer = requestAnimationFrame(function fn(){
      let oTop =(document.querySelector('.qqqqqqq') as HTMLElement).scrollTop;
      if(oTop > 0){
        (document.querySelector('.qqqqqqq') as HTMLElement).scrollTop= oTop - 100;
        timer = requestAnimationFrame(fn);
      }else{
        cancelAnimationFrame((timer as unknown as number));
      } 
    });
  }
  let face = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    e.stopPropagation()
    setFlag(!flag)
  }
  let pablish = () => {
    console.log(value)
    setFlag(false)
    dispatch({
      type: 'about/comment',
      payload: {content: value,
      email: "376717307@qq.com",
      hostId: "a5e81ffe-0ad0-4be9-acca-c0462b1b98a1",
      name: "额",
      url: "/page/about"}
    })
    setValue('')
  }
  let pitch = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    e.stopPropagation()
    setValue(value+e.target.innerText)
  }
  let changeValue = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setValue(e.target.value)
  }
  let close = () => {
    setFlag(false)
  }
  let pageTab = (i: number | string) => {
    if (typeof i === "number") {
      setCur(i)
    } else {
      if (i === "-") {
        cur > 0 ? setCur(cur - 1) : setCur(0)
      } else if (i === "+") {
        cur < Math.ceil(size / pageSize) - 1 ? setCur(cur + 1) : setCur(Math.ceil(size / pageSize) - 1)
      }
    }
  }

  return <Load><div className={styles.main} onClick={() => close()}>
    <div id="fix" onClick={()=>toTop()} className={styles.fix}>
      →|
    </div>
    <div className={styles.mainShells}>
      <div className={styles.top}>
        <div className={styles.topImg}>
          <img style={{ width: "100%", height: "100%" }} src={name.data && name.data.cover} alt="" />
          <h3 style={{ padding: "30px 0" }} dangerouslySetInnerHTML={{ __html: name.data && name.data.html }}></h3>
        </div>
      </div>
    </div>
    
    <div className={styles.foot}>
      <div className={styles.mainShells}>
        <div className={styles.mainShell} id="main">
          <h3 style={{ textAlign: "center", height: "60px", lineHeight: "60px" }}>评论</h3>
          <div className={styles.comment}>
            <div className={styles.mainShell}>
              <div className={styles.commentTop}>
                <textarea
                  value={value}
                  onChange={(e) => changeValue(e)}
                  placeholder="请输入评论内容（支持 Markdown）"
                  className={styles.input}
                  style={{ height: "142px", minHeight: "142px", maxHeight: "274px", overflowY: "hidden", resize: "none" }}></textarea>
              </div>
              <div className={styles.commentBottom}>
                <div className={styles.face} onClick={(e)=>face(e)}>表情</div>
                <button className={styles.btn} onClick={()=>pablish()}>发布</button>
              </div>
              {
                flag?<div className={styles.faces}>
                {
                  Object.values(emojis).map((item, ind) => {
                    return <span key={ind} onClick={(e:any)=>pitch(e)}>{item}</span>
                  })
                }
              </div>:''
              }
            </div>
          </div>
          {
            hostList.length && hostList.map(item => {
              return <div className={styles.lists} key={item.id} >
                <Info item={item} size={size} />
                
              </div>
            })
          }
          <div className={styles.pages}>
            <div>
              <span onClick={()=>pageTab("-")}>&lt;</span>
              {
                size && new Array(Math.ceil(size/pageSize)).fill(1).map((item, ind) => {
                  return <span onClick={()=>pageTab(ind)} className={cur===ind?styles.active:''} key={ind}>{ind+1}</span>
                })
              }
              <span onClick={()=>pageTab("+")}>&gt;</span>
            </div>
          </div>
          <h3 style={{ textAlign: "center", height: "60px", lineHeight: "60px" }}>推荐阅读</h3>
          {
            recommed.length && recommed.map(item => {
              return <div className={styles.listss} key={item.id} >
                 <div className={styles.info}>
                  <div id="li" className={styles.shell}>
                      <div className={styles.list} key={item.id}>
                        <div><h3 className={styles.h3}>{item.title}</h3><span>{~~((+new Date(`${item.updateAt.replace(/T|.000Z/g,' ')}`) - +new Date(`${item.publishAt.replace(/T|.000Z/g,' ')}`))/3600000/24)}天前</span><span>{item.category?item.category.label:""}</span></div>
                        <div className={styles.content}>
                          <dl>
                            {item.cover ? <dt><img src={item.cover} alt="" /></dt>:''}
                            <dd>
                              <p>{item.summary}</p>
                              <p><span>{item.likes}</span><span>{item.views}</span><span>分享</span></p>
                            </dd>
                          </dl>
                        </div>
                      </div>
                  </div>
                </div>
              </div>
            })
          }
        </div>
      </div>
    </div>
  </div></Load>;
};

export default connect(
  ({ about, loading }: { about: IndexModelState; loading: Loading }) => ({
    about,
    loading: loading.models.about,
  }),
)(About);
